window.onload = function () {
  var img1 = new Image()
  img1.src = "./img/tankAll.gif"
  var img2 = new Image()
  img2.src = "./img/menu.gif"
  var canvas1 = document.querySelector('#cal1')
  var cxt = canvas1.getContext("2d")
  var number1 = document.querySelector('.number1')
  var number2 = document.querySelector('.number2')
  var au1 = document.querySelector('#au1')
  var au2 = document.querySelector('#au2')
  var au3 = document.querySelector('#au3')
  img1.onload = function () {
    var heroLivers
    var enemyTankLivers
    img2.onload = function () {
      function game() {
        var x = 0
        function move1() {
          cxt.save()
          cxt.clearRect(0, 0, canvas1.width, canvas1.height)
          cxt.translate(0, -x)
          cxt.drawImage(img2, 0, 384)
          cxt.drawImage(img1, 128, 96, 32, 28, 100, 594, 32, 28)
          x = x + 1
          if (x > canvas1.height) {
            clearInterval(timer0)
          }
          cxt.restore()
        }
        var timer0 = setInterval(function () { return move1() }, 5)
      }
      window.addEventListener('keydown', function (event) {
        if (event.key == 'Enter') {
          au1.play()
          number1.style.display = ' inline'
          number2.style.display = ' inline'
          number2.innerHTML = 3
          number1.innerHTML = 12
          flashTankMap()
        }
        else if (event.key == 's') {
          cxt.clearRect(0, 0, canvas1.width, canvas1.height)
          cxt.drawImage(img2, 0, 0)
          cxt.drawImage(img1, 128, 96, 32, 28, 100, 240, 32, 28)
        }
        else if (event.key == 'w') {
          cxt.clearRect(0, 0, canvas1.width, canvas1.height)
          cxt.drawImage(img2, 0, 0)
          cxt.drawImage(img1, 128, 96, 32, 28, 100, 210, 32, 28)
        }
      })

      hero = new Hero(120, 352, 0, [0, 0])
      var enemyTanksColor = [[0, 32], [128, 0], [128, 32]]

      for (var i = 0; i < 3; i++) {
        var enemyTank = new EnemyTank(88 * (i + 1), 88, getRandomInt(0, 3), enemyTanksColor[getRandomInt(0, 2)])
        enemyTanks[i] = enemyTank
      }

      function flashTankMap() {
        cxt.clearRect(0, 0, 384, 384)
        heroLivers = parseInt(number2.innerHTML)
        enemyTankLivers = parseInt(number1.innerHTML)
        if (hero.liver == true) {
          drawTank(hero)
          for (var i = 0; i < heroBullets.length; i++) {
            if (heroBullets[i] != null && heroBullets[i].liver == true) {
              drawBullet(heroBullets[i])
            }
          }
        }
        else {
          heroLivers--
          number2.innerHTML = heroLivers
          if (heroLivers < 0) {
            alert('游戏结束,闯关失败')
          }
          else {
            au3.play()
            hero.x = 120
            hero.y = 352
            hero.direct = 0
            hero.color = [0, 0]
            hero.liver = true
          }
        }
        for (var i = 0; i < 3; i++) {
          if (enemyTanks[i].liver == true) {
            drawTank(enemyTanks[i])
            autoMove(enemyTanks[i])
            for (let i = 0; i < enemyTankBullets.length; i++) {
              if (enemyTankBullets[i] != null && enemyTankBullets[i].liver == true) {
                drawBullet(enemyTankBullets[i])
              }
            }
          }
          else {
            enemyTankLivers--
            number1.innerHTML = enemyTankLivers
            if (enemyTankLivers < 0) {
              alert('恭喜你,闯关成功')
            }
            else {
              au3.play()
              enemyTanks[i].x = 88 * (i + 1)
              enemyTanks[i].y = 88
              enemyTanks[i].direct = getRandomInt(0, 3)
              enemyTanks[i].color = enemyTanksColor[getRandomInt(0, 2)]
              enemyTanks[i].liver = true
              enemyTanks[i].step = 22
            }
          }
        }
        drawMap(0, 0)
        drawMap(64, 0)
        drawMap(128, 0)
        drawMap(192, 0)
        drawMap(256, 0)
        drawMap(320, 0)
        drawHome()
        if (heroLivers >= 0 && enemyTankLivers >= 0) {
          window.requestAnimationFrame(flashTankMap)
        }
        else {
          for (var i = 0; i < 3; i++) {
            enemyTanks[i].x = 88 * (i + 1)
            enemyTanks[i].y = 88
            enemyTanks[i].direct = getRandomInt(0, 3)
            enemyTanks[i].color = enemyTanksColor[getRandomInt(0, 2)]
            enemyTanks[i].liver = true
            enemyTanks[i].step = 22
          }
          number1.style.display = 'none'
          number2.style.display = 'none'
          hero.liver = true
          hero.x = 120
          hero.y = 352
          hero.direct = 0
          game()
        }
      }

      // window.setInterval(function () {
      //   return flashTankMap()
      // }, 100)

      //画地图函数
      function drawMap(x, y) {
        cxt.drawImage(img1, 32, 96, 16, 16, x, y, 16, 16)
        cxt.drawImage(img1, 32, 96, 16, 16, 16 + x, y, 16, 16)
        cxt.drawImage(img1, 32, 96, 16, 16, x, 16 + y, 16, 16)
        cxt.drawImage(img1, 32, 96, 16, 16, x + 16, 16 + y, 16, 16)
      }

      //画家函数
      function drawHome() {
        cxt.drawImage(img1, 256, 0, 32, 32, 176, 352, 32, 32)
        cxt.drawImage(img1, 0, 96, 16, 16, 176 - 16, 352 + 16, 16, 16)
        cxt.drawImage(img1, 0, 96, 16, 16, 176 - 16, 352, 16, 16)
        cxt.drawImage(img1, 0, 96, 16, 16, 176 - 16, 352 - 16, 16, 16)
        cxt.drawImage(img1, 0, 96, 16, 16, 176, 352 - 16, 16, 16)
        cxt.drawImage(img1, 0, 96, 16, 16, 176 + 16, 352 - 16, 16, 16)
        cxt.drawImage(img1, 0, 96, 16, 16, 176 + 32, 352 - 16, 16, 16)
        cxt.drawImage(img1, 0, 96, 16, 16, 176 + 32, 352, 16, 16)
        cxt.drawImage(img1, 0, 96, 16, 16, 176 + 32, 352 + 16, 16, 16)
      }

      //画坦克函数
      function drawTank(tank) {
        switch (tank.direct) {
          case 0:
            cxt.drawImage(img1, 0 + tank.color[0], tank.color[1], 32, 32, tank.x, tank.y, 32, 32)
            break
          case 1:
            cxt.drawImage(img1, 96 + tank.color[0], tank.color[1], 32, 32, tank.x, tank.y, 32, 32)
            break
          case 2:
            cxt.drawImage(img1, 32 + tank.color[0], tank.color[1], 32, 32, tank.x, tank.y, 32, 32)
            break
          case 3:
            cxt.drawImage(img1, 64 + tank.color[0], tank.color[1], 32, 32, tank.x, tank.y, 32, 32)
            break
        }
      }

      //画子弹函数
      function drawBullet(tank) {
        switch (tank.direct) {
          case 0:
            cxt.fillStyle = "#ffffff"
            cxt.fillRect(tank.x + 14, tank.y - 4, 4, 4)
            cxt.beginPath()
            cxt.moveTo(tank.x + 14, tank.y - 4)
            cxt.lineTo(tank.x + 14 + 4, tank.y - 4)
            cxt.lineTo(tank.x + 14 + 2, tank.y - 6)
            cxt.closePath()
            cxt.fill()
            break
          case 1:
            cxt.fillStyle = "#ffffff"
            cxt.fillRect(tank.x + 32, tank.y + 14, 4, 4)
            cxt.beginPath()
            cxt.moveTo(tank.x + 32 + 4, tank.y + 14)
            cxt.lineTo(tank.x + 32 + 4, tank.y + 14 + 4)
            cxt.lineTo(tank.x + 32 + 6, tank.y + 14 + 2)
            cxt.closePath()
            cxt.fill()
            break
          case 2:
            cxt.fillStyle = "#ffffff"
            cxt.fillRect(tank.x + 14, tank.y + 32, 4, 4)
            cxt.beginPath()
            cxt.moveTo(tank.x + 14, tank.y + 32 + 4)
            cxt.lineTo(tank.x + 18, tank.y + 32 + 4)
            cxt.lineTo(tank.x + 16, tank.y + 32 + 6)
            cxt.closePath()
            cxt.fill()
            break
          case 3:
            cxt.fillStyle = "#ffffff"
            cxt.fillRect(tank.x - 4, tank.y + 14, 4, 4)
            cxt.beginPath()
            cxt.moveTo(tank.x - 4, tank.y + 14)
            cxt.lineTo(tank.x - 4, tank.y + 18)
            cxt.lineTo(tank.x - 6, tank.y + 16)
            cxt.closePath()
            cxt.fill()
            break
        }
      }

      //英雄坦克移动函数
      var timer
      var x = true
      function moveUp(hero) {
        clearInterval(timer)
        let n = 0
        timer = setInterval(function () {
          x = false
          n = n + 1
          if (n == 16) {
            n = 0
            x = true
            clearInterval(timer)
          }
          return hero.moveUp()
        }, 10)
      }

      function moveRight(hero) {
        clearInterval(timer)
        let n = 0
        timer = setInterval(function () {
          x = false
          n = n + 1
          if (n == 16) {
            clearInterval(timer)
            n = 0
            x = true
          }
          return hero.moveRight()
        }, 10)
      }

      function moveDown(hero) {
        clearInterval(timer)
        let n = 0
        timer = setInterval(function () {
          x = false
          n = n + 1
          if (n == 16) {
            clearInterval(timer)
            n = 0
            x = true
          }
          return hero.moveDown()
        }, 10)
      }

      function moveLeft(hero) {
        clearInterval(timer)
        let n = 0
        timer = setInterval(function () {
          x = false
          n = n + 1
          if (n == 16) {
            clearInterval(timer)
            n = 0
            x = true
          }
          return hero.moveLeft()
        }, 10)
      }
      window.addEventListener('keydown', function (event) {
        var code = event.key
        switch (code) {
          case 'w':
            moveUp(hero)
            break
          case 'd':
            moveRight(hero)
            break
          case 's':
            moveDown(hero)
            break
          case 'a':
            moveLeft(hero)
            break
        }
      })
      window.addEventListener('keyup', function (event) {
        if (event.key == ' ') {
          au2.play()
          hero.shotBullet()
        }
      })

      //随机函数（函数返回整数）
      function getRandomInt(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }

      //敌人自动移动函数
      function autoMove(enemyTank) {
        var arr = new Array(3)
        if (enemyTank.step <= 0) {
          //上
          if (enemyTank.x > 0 && enemyTank.x < 352 && enemyTank.y <= 0) {
            enemyTank.direct = getRandomInt(1, 3)
          }
          //左上
          else if (enemyTank.x <= 0 && enemyTank.y <= 0) {
            enemyTank.direct = getRandomInt(1, 2)
          }
          //右
          else if (enemyTank.x >= 352 && enemyTank.y > 0 && enemyTank.y < 352) {
            arr[0] = 0
            arr[1] = 2
            arr[2] = 3
            enemyTank.direct = arr[getRandomInt(0, 2)]
          }
          //右上
          else if (enemyTank.x >= 352 && enemyTank.y <= 0) {
            enemyTank.direct = getRandomInt(2, 3)
          }
          //下
          else if (enemyTank.x > 0 && enemyTank.x < 352 && enemyTank.y >= 352) {
            arr[0] = 0
            arr[1] = 1
            arr[2] = 3
            enemyTank.direct = arr[getRandomInt(0, 2)]
          }
          //下右
          else if (enemyTank.x >= 352 && enemyTank.y >= 352) {
            arr[0] = 0
            arr[1] = 3
            enemyTank.direct = arr[getRandomInt(0, 1)]
          }
          //左
          else if (enemyTank.x <= 0 && enemyTank.y > 0 && enemyTank.y < 352) {
            enemyTank.direct = getRandomInt(0, 2)
          }
          //下左
          else if (enemyTank.x <= 0 && enemyTank.y >= 352) {
            enemyTank.direct = getRandomInt(0, 1)
          }
          else {
            enemyTank.direct = getRandomInt(0, 3)
          }
          enemyTank.step = 88
        }
        else {
          enemyTank.step--
          enemyTank.move()
        }
      }

      //敌人两秒随机射击子弹
      setInterval(function () {
        return autoBullet(enemyTanks)
      }, 2000)

      //敌人射击子弹函数
      function autoBullet(enemyTanks) {
        for (let i = 0; i < enemyTanks.length; i++) {
          if (getRandomInt(0, 1) == 0) {
            enemyTanks[i].shotBullet()
          }
        }
      }
      game()
    }
  }
}